<template>
<!-- 支付底部 -->
    <div class="buy-container" @click="closeBuyBox($event)">
        <div class="buy-box">
            <div class="buy-num-box">
                <span>合计：</span><span class="price">{{all}}</span><span class="yuan">元</span>
                <div class="num-box">
                    <span class="reduce" @click="changeNum(-1)">-</span>
                    <span class="num">{{num}}</span>
                    <span class="add" @click="changeNum(1)">+</span>
                </div>
            </div>
            <div class="sure-buy-btn" @click="pay()">确认支付</div>
        </div>
    </div>
</template>
<script>
import { Toast } from 'mint-ui'

export default {
    props: ['price'],
    data () {
        return {
            num: 1
        }
    },
    computed: {
        all () {
            return Number(this.price * this.num).toFixed(2)
        }
    },
    methods: {
        changeNum (index) {
            if (this.num > 1 && index < 0 ) {
                this.num = this.num - 1  
            } 
            if (index > 0) {
                this.num = this.num + 1
            }
        },
        pay () {
		  if(this.num < 5){
		      Toast({
                        message: '每次至少需要买入5个',
                        duration: 1000
                    })
		  }else
		  {	 
            this.$emit('sureBuy', {
                all: this.all,
                num: this.num
            })
		  }
        },
        closeBuyBox (e) {
            if (e.target.className == 'buy-container') {
                this.$emit('changeIsBuy', false)
            }
        }
    }
}
</script>

<style lang="less" scoped>
    .buy-container {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        z-index: 100;
        bottom: 0;
        background: rgba(0, 0, 0, 0.3);
        .buy-box {
            position: absolute;
            left: 0;
            bottom: 0;
            background: #fff;
            width: 100%;
        }
        .buy-num-box { 
            font-size: 0.3rem;
            padding: 0 0.3rem;
            height: 1.8rem;
            line-height: 1.8rem;
            .price {
                color: #ff2d41;
            }
            .yuan {
                color: #ff2d41;                
            }
            .num-box {
                float: right;
                .reduce {
                    float: left;
                    width: 0.8rem;
                    height: 0.8rem;
                    border: 1px solid #ccc;
                    margin-top: 0.5rem;
                    line-height: 0.8rem;
                    text-align: center;

                }
                .add {
                    float: left;
                    width: 0.8rem;
                    height: 0.8rem;
                    border: 1px solid #ccc;
                    margin-top: 0.5rem;
                    line-height: 0.8rem;
                    text-align: center;
                }
                .num {
                    float: left;
                    width: 1.7rem;
                    height: 0.8rem;
                    border-top: 1px solid #ccc;
                    border-bottom: 1px solid #ccc;
                    margin-top: 0.5rem;
                    line-height: 0.8rem;
                    text-align: center;
                }
            }
        }
        .sure-buy-btn {
            height: 0.8rem;
            line-height: 0.8rem;
            background: #29abae;
            color: #fff;
            font-size: 0.3rem;
            text-align: center;
        }
    }
</style>
